<template>
  <div id="app" @click="handleClick">
    <circle :data="state.data" :x="state.x" :y="300" :r="200"/>
    <circle :data="state.data" :x="state.x" :y="400" :r="200"/>
  </div>
</template>

<script>
import {reactive} from 'vue';
export default {
  name: 'App',
  setup(){
    // composition api 的入口
    const state = reactive({
      data: [ // 数据分析 当前 学习某个班的人数
        {name: '语文', count: 100, color: 'red'},
        {name: '数学', count: 200, color: 'yellow'},
        {name: '物理', count: 300, color: 'pink'},
        {name: '化学', count: 400, color: 'green'}
      ],
      x:300
    });

    function handleClick(){
      //vue特点是异步更新的
      //state.x = 500;
      state.data.push({name:'英语',count:200,color:'blue'})
    }

    console.log(handleClick);
    return {
      state,
      handleClick
    }
  }
}
</script>

<style>
*{
  margin:0;
  padding:0;
}
</style>
